<h1>
  Step Execution
  <span *ngIf="stepResource && execution">
    <strong>{{stepResource.stepExecution.name}} ({{stepResource.stepExecution.id}})</strong> -
  Job execution <strong>{{execution.name}} ({{execution.jobExecutionId}})</strong>
  </span>
</h1>

<div *ngIf="!loading">

  <div class="datagrid-action-bar">
    <button type="button" class="btn btn-sm btn-secondary" (click)="refresh()">
      Refresh
    </button>
  </div>

  <div class="clr-row">
    <div class="clr-col-lg-6 clr-col-md-12 clr-col-12">
      <app-view-card titleModal="Information" keyContext="step" name="{{stepResource.stepExecution.id}}" id="info">
        <ng-template>
          <div class="progress" *ngIf="stepProgress.percentageComplete < 1">
            <progress [value]="stepProgress.percentageComplete * 100" max="100"></progress>
          </div>

          <div *ngIf="!stepResource.stepExecution">
            No Step Execution available.
          </div>

          <div *ngIf="stepResource?.stepExecution" class="block card-block-keyvalue lg-key">
            <div class="row">
              <div class="key"><strong>Step Execution Id</strong></div>
              <div class="value">{{stepResource.stepExecution.id}}</div>
            </div>
            <div class="row">
              <div class="key"><strong>Job Execution Id</strong></div>
              <div class="value">{{stepResource.jobExecutionId}}</div>
            </div>
            <div class="row">
              <div class="key"><strong>Step Name</strong></div>
              <div class="value">{{stepResource.stepExecution.name}}</div>
            </div>
            <div class="row">
              <div class="key"><strong>Step Type</strong></div>
              <div class="value">{{stepResource.stepType}}</div>
            </div>
            <div class="row">
              <div class="key"><strong>Status</strong></div>
              <div class="value">
                <span class="{{stepResource.stepExecution.labelStatusClass()}}">
                  {{stepResource.stepExecution.status}}</span>
              </div>
            </div>
            <div class="row">
              <div class="key"><strong>Commits</strong></div>
              <div class="value">{{stepResource.stepExecution.commitCount}}</div>
            </div>
            <div class="row">
              <div class="key"><strong>Duration</strong></div>
              <div
                class="value">{{stepResource.stepExecution.startTime | duration: stepResource.stepExecution.endTime}}
              </div>
            </div>
            <div class="row">
              <div class="key"><strong>Filter Count</strong></div>
              <div class="value">{{stepResource.stepExecution.filterCount}}</div>
            </div>
            <div class="row">
              <div class="key"><strong>Process Skips</strong></div>
              <div class="value">{{stepResource.stepExecution.processSkipCount}}</div>
            </div>
            <div class="row">
              <div class="key"><strong>Reads</strong></div>
              <div class="value">{{stepResource.stepExecution.readCount}}</div>
            </div>
            <div class="row">
              <div class="key"><strong>Read Skips</strong></div>
              <div class="value">{{stepResource.stepExecution.readSkipCount}}</div>
            </div>
            <div class="row">
              <div class="key"><strong>Rollbacks</strong></div>
              <div class="value">{{stepResource.stepExecution.rollbackCount}}</div>
            </div>
            <div class="row">
              <div class="key"><strong>Skips</strong></div>
              <div class="value">{{stepResource.stepExecution.skipCount}}</div>
            </div>
            <div class="row">
              <div class="key"><strong>Writes</strong></div>
              <div class="value">{{stepResource.stepExecution.writeCount}}</div>
            </div>
            <div class="row">
              <div class="key"><strong>Write Skips</strong></div>
              <div class="value">{{stepResource.stepExecution.writeSkipCount}}</div>
            </div>
          </div>

        </ng-template>
      </app-view-card>

      <app-view-card titleModal="Exit Description" keyContext="step" name="{{stepResource.stepExecution.id}}" id="exit">
        <ng-template>
          <div class="clr-log">
            <pre style="margin:0">{{stepResource?.stepExecution?.exitMessage || 'N/A'}}</pre>
          </div>
        </ng-template>
      </app-view-card>

      <app-view-card titleModal="Step Execution Context" keyContext="step" name="{{stepResource.stepExecution.id}}"
                     id="stepExecutionCount">
        <ng-template>
          <div *ngIf="(stepResource.stepExecution.executionContext.values | keyvalue)?.length > 0">
            <div *ngFor="let item of stepResource.stepExecution.executionContext.values | keyvalue"
                 class="block card-block-keyvalue lg-key">
              <div class="row">
                <div class="key"><strong>{{item.key}}</strong></div>
                <div class="value">{{item.value}}</div>
              </div>
            </div>
          </div>
          <div *ngIf="!(stepResource.stepExecution.executionContext.values | keyvalue)?.length > 0">
            No step execution context
          </div>
        </ng-template>
      </app-view-card>

      <app-view-card titleModal="Step Execution History" keyContext="step" name="{{stepResource.stepExecution.id}}"
                     id="stepHistoryExecution">
        <ng-template>
          <table *ngIf="stepProgress?.stepExecutionHistory"
                 class="table table-noborder table-compact" style="margin:0">
            <thead>
            <tr>
              <th class="left">Name</th>
              <th class="left">Count</th>
              <th class="left">Min</th>
              <th class="left">Max</th>
              <th class="left">Mean</th>
              <th class="left">Standard Deviation</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td class="left"><strong>Commit Count</strong></td>
              <td class="left">{{stepProgress.stepExecutionHistory.commitCount.count}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.commitCount.min}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.commitCount.max}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.commitCount.mean}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.commitCount.standardDeviation}}</td>
            </tr>
            <tr>
              <td class="left"><strong>Duration</strong></td>
              <td class="left">{{stepProgress.stepExecutionHistory.duration.count}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.duration.min}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.duration.max}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.duration.mean}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.duration.standardDeviation}}</td>
            </tr>
            <tr>
              <td class="left"><strong>Duration per Read</strong></td>
              <td class="left">{{stepProgress.stepExecutionHistory.durationPerRead.count}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.durationPerRead.min}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.durationPerRead.max}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.durationPerRead.mean}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.durationPerRead.standardDeviation}}</td>
            </tr>
            <tr>
              <td class="left"><strong>Filter Count</strong></td>
              <td class="left">{{stepProgress.stepExecutionHistory.filterCount.count}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.filterCount.min}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.filterCount.max}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.filterCount.mean}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.filterCount.standardDeviation}}</td>
            </tr>
            <tr>
              <td class="left"><strong>Process Skip Count</strong></td>
              <td class="left">{{stepProgress.stepExecutionHistory.processSkipCount.count}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.processSkipCount.min}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.processSkipCount.max}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.processSkipCount.mean}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.processSkipCount.standardDeviation}}
              </td>
            </tr>
            <tr>
              <td class="left"><strong>Read Count</strong></td>
              <td class="left">{{stepProgress.stepExecutionHistory.readCount.count}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.readCount.min}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.readCount.max}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.readCount.mean}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.readCount.standardDeviation}}</td>
            </tr>
            <tr>
              <td class="left"><strong>Read Skip Count</strong></td>
              <td class="left">{{stepProgress.stepExecutionHistory.readSkipCount.count}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.readSkipCount.min}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.readSkipCount.max}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.readSkipCount.mean}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.readSkipCount.standardDeviation}}</td>
            </tr>
            <tr>
              <td class="left"><strong>Rollback Count</strong></td>
              <td class="left">{{stepProgress.stepExecutionHistory.rollbackCount.count}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.rollbackCount.min}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.rollbackCount.max}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.rollbackCount.mean}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.rollbackCount.standardDeviation}}</td>
            </tr>
            <tr>
              <td class="left"><strong>Write Count</strong></td>
              <td class="left">{{stepProgress.stepExecutionHistory.writeCount.count}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.writeCount.min}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.writeCount.max}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.writeCount.mean}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.writeCount.standardDeviation}}</td>
            </tr>
            <tr>
              <td class="left"><strong>Write Skip Count</strong></td>
              <td class="left">{{stepProgress.stepExecutionHistory.writeSkipCount.count}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.writeSkipCount.min}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.writeSkipCount.max}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.writeSkipCount.mean}}</td>
              <td class="left">{{stepProgress.stepExecutionHistory.writeSkipCount.standardDeviation}}</td>
            </tr>
            </tbody>
          </table>
        </ng-template>
      </app-view-card>
    </div>
    <div class="clr-col-lg-6 clr-col-md-12 clr-col-12">
      <app-view-card titleModal="Task" keyContext="job" name="{{execution.jobExecutionId}}" id="task">
        <ng-template>
          <div *ngIf="!loadingTask">
            <div class="block card-block-keyvalue" *ngIf="task">
              <div class="row">
                <div class="key">Name</div>
                <div class="value">{{task.name}}</div>
              </div>
              <div *ngIf="task.description" class="row">
                <div class="key">Description</div>
                <div class="value">{{task.description}}</div>
              </div>
              <div class="row">
                <div class="key">Definition</div>
                <div class="value"><span class="dsl-text">{{task.dslText}}</span></div>
              </div>
              <div class="row">
                <div class="key">Status</div>
                <div class="value"><span class="{{task.labelStatusClass()}}">{{task.status}}</span></div>
              </div>
              <div class="row">
                <div class="key">Applications</div>
                <div class="value">
                  <div *ngIf="!loadingApplications">
                    <div *ngFor="let app of applications">
                      <strong>{{app.name}}</strong>&nbsp;
                      <span class="label label-app {{app.type}}">{{app.origin}}</span>
                    </div>
                  </div>
                  <div *ngIf="loadingApplications">
                    <clr-spinner clrInline clrSmall></clr-spinner>
                    Loading application(s)...
                  </div>
                </div>
              </div>
            </div>
            <div *ngIf="!task">
              No task found.
            </div>
          </div>
          <div *ngIf="loadingTask">
            <clr-spinner clrInline clrSmall></clr-spinner>
            Loading task...
          </div>
        </ng-template>
        <div class="card-footer" *ngIf="task">
          <button class="btn btn-sm btn-secondary" (click)="navigateTask()">View task</button>
          <button type="button" class="btn btn-sm btn-secondary" (click)="relaunch()">Relaunch Task</button>
        </div>
      </app-view-card>
      <app-view-card titleModal="Task execution" keyContext="job" name="{{execution.jobExecutionId}}" id="execution">
        <ng-template>
          <div class="block card-block-keyvalue lg-key" *ngIf="!loadingExecution">
            <div *ngIf="taskExecution">
              <div class="row">
                <div class="key">Execution Id</div>
                <div class="value">{{taskExecution.executionId}}</div>
              </div>
              <div class="row">
                <div class="key">Arguments</div>
                <div class="value">
                  <div *ngIf="taskExecution.getArgumentsToArray().length > 0">
                    <div *ngFor="let arg of taskExecution.getArgumentsToArray()">
                      {{arg[0]}}:
                      <strong>{{arg[1]}}</strong>
                    </div>
                  </div>
                  <div *ngIf="taskExecution.getArgumentsToArray().length === 0">
                    N/A
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="key">External Execution Id</div>
                <div class="value">
                  <a [routerLink]="'/tasks-jobs/job-executions/' + jobExecutionId"
                     *ngFor="let jobExecutionId of taskExecution.jobExecutionIds">
                    {{jobExecutionId}}
                  </a>
                  <div *ngIf="taskExecution.jobExecutionIds?.length == 0">
                    N/A
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="key">Batch Job</div>
                <div class="value">
                  <clr-icon *ngIf="taskExecution.jobExecutionIds?.length > 0" shape="check"></clr-icon>
                  <clr-icon *ngIf="taskExecution.jobExecutionIds?.length == 0" shape="success-standard"></clr-icon>
                </div>
              </div>
              <div class="row">
                <div class="key">Job Execution Ids</div>
                <div class="value">
                  {{taskExecution.externalExecutionId || 'N/A'}}
                </div>
              </div>
              <div class="row">
                <div class="key">Start Time</div>
                <div class="value">
                  {{taskExecution.startTime | datetime}}
                </div>
              </div>
              <div class="row">
                <div class="key">End Time</div>
                <div class="value">
                  {{taskExecution.endTime | datetime}}
                </div>
              </div>
              <div class="row">
                <div class="key">Duration</div>
                <div class="value">
                  {{taskExecution.startTime | duration: taskExecution.endTime}}
                </div>
              </div>
              <div class="row">
                <div class="key">Exit Code</div>
                <div class="value">
                  {{taskExecution.exitCode}}
                </div>
              </div>
              <div class="row">
                <div class="key">Exit Message</div>
                <div class="value">
                  {{taskExecution.exitMessage || 'N/A'}}
                </div>
              </div>
              <div class="row">
                <div class="key">Resource URL</div>
                <div class="value">
                  {{taskExecution.resourceUrl || 'N/A'}}
                </div>
              </div>
              <div class="row">
                <div class="key">Application Properties</div>
                <div class="value">
                  <div *ngIf="taskExecution.getAppPropertiesToArray().length > 0">
                    <div *ngFor="let arg of taskExecution.getAppPropertiesToArray()">
                      {{arg.key}}:
                      <strong>{{arg.value}}</strong>
                    </div>
                  </div>
                  <div *ngIf="taskExecution.getAppPropertiesToArray().length === 0">
                    N/A
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="key">Platform Properties</div>
                <div class="value">
                  <div *ngIf="taskExecution.getDeploymentPropertiesToArray().length > 0">
                    <div *ngFor="let arg of taskExecution.getDeploymentPropertiesToArray()">
                      {{arg.key}}:
                      <strong>{{arg.value}}</strong>
                    </div>
                  </div>
                  <div *ngIf="taskExecution.getDeploymentPropertiesToArray().length === 0">
                    N/A
                  </div>
                </div>
              </div>
            </div>
            <div *ngIf="!taskExecution">
              No execution yet.
            </div>
          </div>
          <div *ngIf="loadingExecution">
            <clr-spinner clrInline clrSmall></clr-spinner>
            Loading execution...
          </div>
        </ng-template>
        <div class="card-footer" *ngIf="execution">
          <button class="btn btn-sm btn-secondary" (click)="navigateTaskExecution()">View task execution</button>
          <button class="btn btn-sm btn-secondary" (click)="viewLog()">View log</button>
        </div>
      </app-view-card>
    </div>
  </div>
</div>

<div *ngIf="loading" style="padding:1rem 0;">
  <clr-spinner clrInline clrSmall></clr-spinner>
  Loading job step execution...
</div>

<app-task-execution-log #logModal></app-task-execution-log>
